<template>
	<div>
		<el-row>
			<el-col :span="4" class="firstcol" v-if="!isMobile"><font size="4">所属一级学科：</font></el-col>
			<el-col :span="isMobile ? 7 : 5">
				<el-select v-model="ruleForm.FirstSubject" @change="changeFirstSub" placeholder="请选择对应一级学科">
					<el-option 
					v-for="item in FirstSubList"
					:key="item.label"
					:label="item.label"
					:value="item.label">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="4" class="firstcol" v-if="!isMobile"><font size="4">所属二级学科：</font></el-col>
			<el-col :span="isMobile ? 7 : 5">
				<el-select v-model="ruleForm.SecondSubject" placeholder="请选择对应二级学科">
					<el-option 
					v-for="item in SecondSubList"
					:key="item.label"
					:label="item.label"
					:value="item.label">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="3">
				<el-button @click="subjectFilter(false)">筛选</el-button>
			</el-col>
			<el-col :span="3">
				<el-button @click="subjectFilter(true)">列出全部</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import constant from '../static/constant.json'
	import { _isMobile } from '../js/common.js'
	export default {
		
		methods:{
			// 子组件向父组件传值 
			subjectFilter(isall){
				if(isall){
					this.ruleForm.FirstSubject = ''
					this.ruleForm.SecondSubject = ''
					this.SecondSubList = []
				}
				this.$emit('getFilterParms',this.ruleForm.FirstSubject,this.ruleForm.SecondSubject,isall)
			},
			changeFirstSub(value){
				this.ruleForm.SecondSubject=''
				this.SecondSubList = this.SecondSubLists[value]
			},
		},
		data() {
			return{
				isMobile: false,
				ruleForm:{
						FirstSubject:'',
						SecondSubject:'',
						reference:''
					},
					responseResult:[],
					optionList:'',
					FirstSubList: constant.FirstSubList,
					SecondSubList:'',
					SecondSubLists: constant.SecondSubList,
			}
		},
		mounted() {
			this.isMobile = _isMobile()
		}
	}
</script>

<style scoped lang="less">
	.firstcol {
		line-height: 40px;
	}
	.text-left {
		text-align: left;
	}
	.title {
		color: gray;
		font-size: 28px;
		text-align: left;
		margin-left: 20px;
	}
	hr {
		height: 1px;
		color: gray;
	}
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
		line-height: 100%;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
</style>
